<template>
    <div class="moodle-tabs">
        <ul class="nav-tabs">
            <li class="nav-item" v-for="(tab, index) in props.list" :key="index" :class="{ active: tab.value === props.active }">
                <router-link :to="tab.link" class="nav-link">{{ $t(tab.text) }}</router-link>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
interface tabItem {
    link: string
    text: string
    value: string | number
}
const props = defineProps<{
    list: tabItem[]
    active: string
}>()
</script>

<style lang="less">
.moodle-tabs {
    margin-bottom: 20px;
    border-bottom: 2px solid #f06423;

    .nav-tabs {
        display: flex;
        gap: 5px;

        .nav-item {
            a {
                border-radius: 2px;
                padding: 0 10px;
                background-color: #f0f0f0;
                border-color: #f0f0f0;
                color: #000;
                font-size: 15px;
                line-height: 38px;
                display: block;
            }

            &.active {
                a {
                    color: #fff;
                    background-color: #f06423;
                }
            }
        }
    }
}
</style>
